<template>
	<uv-tabbar :value="value" @change="index=>value = index">
		<uv-tabbar-item text="首页">
			<template v-slot:active-icon>
				<image class="icon" src="/static/Tabbar/index.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="/static/Tabbar/unindex.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="商城" icon="photo">
			<template v-slot:active-icon>
				<image class="icon" src="/static/Tabbar/shop.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="/static/Tabbar/unshop.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="健康" icon="play-right">
			<template v-slot:active-icon>
				<image class="icon" src="/static/Tabbar/health.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="/static/Tabbar/unhealth.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="论坛" icon="account">
			<template v-slot:active-icon>
				<image class="icon" src="/static/Tabbar/forum.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="/static/Tabbar/unforum.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="我的" icon="account">
			<template v-slot:active-icon>
				<image class="icon" src="/static/Tabbar/mine.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="/static/Tabbar/unmine.png"></image>
			</template>
		</uv-tabbar-item>
	</uv-tabbar>
</template>

<script>
	export default {
		name: "uvTabbar",
		data() {
			return {
				value: 0
			};
		}
	}
</script>

<style scoped>
	.icon {
		width: 46rpx;
		height: 46rpx;
	}
</style>